<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      margin:  0px;
      padding: 0px;
    }
  </style>
  <meta charset="UTF-8">
  <title>Line Cap</title>
</head>
<body>
  <canvas id="myCanvas" width="578," height="200"></canvas>
  <script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // Butt line cap (top line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 - 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
    context.lineWidth = 20;
    context.strokeStyle = '#0000FF';
    context.lineCap = 'butt';
    context.stroke();

    // Round line cap (middle line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2);
    context.lineTo(canvas.width - 200, canvas.height / 2);
    context.lineWidth = 20;
    context.strokeStyle = '#0000FF';
    context.lineCap = 'round';
    context.stroke();

    // Square line cap (bottom line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 + 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
    context.lineWidth = 20;
    context.strokeStyle = '#0000FF';
    context.lineCap = 'square';
    context.stroke();
  </script>
</body>
</html>
